<template>
  <div>
    <el-container>
      <el-aside width="210px" style="overflow:hidden" class="leftbar_bg">
        <el-menu :defaultActive="activeIndex">
          <template v-for="(item , idx) in sideMenu">
            <!-- 　　<el-submenu :index="item.loadpage" v-if="item.children.length>0" :key="idx">
              <template slot="title">{{item.name}}</template>
              　　<el-menu-item v-for="(itemChild , idx) in item.children" :index="itemChild.loadpage" :key="idx">
                　　{{itemChild.name}}
                　　</el-menu-item>
            </el-submenu>-->
            <el-menu-item :index="item.loadpage" :key="idx" @click="addTab(item)" style="text-align:left">
              <i class="iconfont icon-renyuanguanli" v-if="item.id=='10401'"></i>
              <i class="iconfont icon-hetongdingdan" v-if="item.id=='10402'"></i>
              <i class="iconfont icon-renwujihua" v-if="item.id=='10403'"></i>
              <i class="iconfont icon-nongyejishu" v-if="item.id=='10404'"></i>
              <i class="iconfont icon-zhiye" v-if="item.id=='10405'"></i>
              <i class="iconfont icon-zhengjian" v-if="item.id=='10406'"></i>
              <i class="iconfont icon-yejibaobiao" v-if="item.id=='10407'"></i>
              <i class="iconfont icon-icon-order-plan" v-if="item.id=='10408'"></i>
              <i class="iconfont icon-icon-test4" v-if="item.id=='10409'"></i>
              <i class="iconfont icon-peixunfazhan" v-if="item.id=='10410'"></i>
              <i class="iconfont icon-yishenpiliebiao-" v-if="item.id=='10411'"></i>
              <i class="iconfont icon-shenpibohui" v-if="item.id=='10412'"></i>

              &nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container class="main_bg">
        <el-main>
          <el-tabs
            v-model="editableTabsValue"
            type="border-card"
            closable
            @tab-remove="removeTab"
            @tab-click="tabclick"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <manager v-if="item.id=='10401'"></manager>
              <workpost v-if="item.id=='10404'"></workpost>
              <workplan v-if="item.id=='10403'"></workplan>
              <performance v-if="item.id=='10407'"></performance>
              <performance2 v-if="item.id=='10409'"></performance2>
              <workplan2 v-if="item.id=='10408'"></workplan2>
              <license v-if="item.id=='10406'"></license>
              <laborbargin v-if="item.id=='10402'"></laborbargin>
              <jobstatus v-if="item.id=='10405'"></jobstatus>
              <workplanyear v-if="item.id=='10410'"></workplanyear>
              <workplan3 v-if="item.id=='10411'"></workplan3>
              <performance3 v-if="item.id=='10412'"></performance3>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import manager from '~/components/person/manager/manager.vue';
import jobstatus from '~/components/person/jobstatus/jobstatus.vue';
import laborbargin from '~/components/person/laborbargin/laborbargin.vue';
import license from '~/components/person/license/license.vue';
import performance from '~/components/person/performance/performance.vue';
import performance2 from '~/components/person/performance/performance2.vue';
import workplan2 from '~/components/person/workplan2/workplan.vue';
import workplan from '~/components/person/workplan/workplan.vue';
import workpost from '~/components/person/workpost/workpost.vue';
import workplanyear from '~/components/person/workplanyear/workplanyear.vue';
import performance3 from '~/components/person/performance3/performance3.vue';
import workplan3 from '~/components/person/workplan3/workplan3.vue';

export default {
  data() {
    return {
      activeIndex: '',
      sideMenu: [],
      ts: this.newStore(),
      data: null,
      editableTabsValue: null,
      editableTabs: [],
    };
  },
  components: {
    manager,
    workpost,
    workplan,
    performance,
    license,
    laborbargin,
    jobstatus,
    workplan2,
    performance2,
    workplanyear,
    performance3,
    workplan3,
  },
  // computed: {
  //   activeIndex() {
  //     return this.$route.path;
  //   },
  // },
  created() {
    console.log(this.$route.path);

    this.getSidemenu();
  },
  methods: {
    tabclick(tab) {
      console.log(tab);
      this.activeIndex = tab.name;
      // this.$router.push(tab.name);
    },
    addTab(item) {
      console.log(item);
      this.$nextTick(() => {
        let ishas = false;
        const tabdata = {
          title: item.name,
          name: item.loadpage,
          id: item.id,
          content: '',
        };
        // console.log(this.editableTabs, '2321');

        for (let i = 0; i < this.editableTabs.length; i += 1) {
          if (this.editableTabs[i].name == tabdata.name) {
            ishas = true;
            break;
          }
        }
        if (!ishas) {
          this.editableTabs.push(tabdata);
        }
        this.editableTabsValue = item.loadpage;
      });
    },
    removeTab(targetName) {
      const tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    getSidemenu() {
      const req = {
        handle:
          '67A5B6FEF17D97DECF116BDF95B95C0B843B7A441565EC6C4A6860EBB8D9E769',
        supid: '104',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.data = ts.d.data.operation1[0].hash.privstr;
        this.sideMenu = JSON.parse(this.data);
        this.activeIndex = this.sideMenu[0].loadpage;
        this.addTab(this.sideMenu[0]);
      });
    },
  },
};
</script>


<style lang="stylus" socped>
.el-menu-item:focus, .el-menu-item:hover{
  background: #fff;
  color: #000;
}
.el-menu {
  border: 0;
}


.el-menu-item {
  background: rgb(50, 50, 59);
  text-align: center;
  color: #fff;
}
.el-menu-item:nth-child(1):focus, .el-menu-item:nth-child(1):hover {
  background: #fff;
  color: #000;
}
.el-menu-item i {
  font-size: 20px;
  float: left;
  color:#Fff
}
.el-menu-item:focus i, .el-menu-item:hover i{
  color: #000!important;
}
.el-menu-item.is-active {
  background: #fff;
  color: #000;
}

</style>
